<template>
  <div class="echarscontent" :style="{minHeight:screenHeight,width:'100%'}">
    <div class="name">新闻各类型(月)访问量监测</div>
    <div ref="myEchars"></div>
  </div>
</template>

<script>
import *as echarts from 'echarts'
export default {
  data(){
    return{
      month:'1',
      screenHeight:'',
      charData: []
    }
  },
  mounted(){
    this.query()
    this.screenHeight = (window.innerHeight - 90) + 'px'
  },
  methods:{
    query(){
      this.$http.get('/api/data').then(res => {
        if(res.status == 0){
          this.charData = [['product'],['军事'],['娱乐'],['生活'],['国际'],['体育'],['科技']]
          res.message.forEach((element,index) => {
            if(index == 0){
              this.month = element.month + ''
            }
            this.charData[0].push(element.month+'')
            this.charData[1].push(element.junshi)
            this.charData[2].push(element.yule)
            this.charData[3].push(element.shenghuo)
            this.charData[4].push(element.guoji)
            this.charData[5].push(element.tiyu)
            this.charData[6].push(element.keji)
          });
          this.showEchars()
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          });
        }
      }).catch(err => {
        this.$message({
            message: err,
            type: 'error'
          });
      })
    },
    showEchars(){
      let chartDom = this.$refs.myEchars
      let myChart = echarts.init(chartDom);
      let option;
      let yue = this.month
      let arr = this.charData
      setTimeout(function () {
        option = {
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false
          },
          dataset: {
            source:arr
          },
          xAxis: { type: 'category' },
          yAxis: { gridIndex: 0 },
          grid: { top: '55%' },
          series: [
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              name: '新闻访问量监测',
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              emphasis: {
                focus: 'self'
              },
              label: {
                formatter: '{b}: {@'+yue+'} ({d}%)'
              },
              encode: {
                itemName: 'product',
                value: yue,
                tooltip: yue
              }
            }
          ]
        };
        myChart.on('updateAxisPointer', function (event) {
          const xAxisInfo = event.axesInfo[0];
          if (xAxisInfo) {
            const dimension = xAxisInfo.value + 1;
            myChart.setOption({
              series: {
                id: 'pie',
                label: {
                  formatter: '{b}: {@[' + dimension + ']} ({d}%)'
                },
                encode: {
                  value: dimension,
                  tooltip: dimension
                }
              }
            });
          }
        });
        myChart.setOption(option);
      });
      myChart.resize({
        width: window.innerWidth - 330,
        height: window.innerHeight * 0.8
      });
    }
  }
}
</script>

<style scoped>
.echarscontent{
  width: 100%;
  background-color: white;
}
.name{
  padding: 20px 0 0 30px;
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgba(30,41,59,var(--tw-text-opacity));
}
</style>